<script lang="ts">
  export default { name: 'PoleChart' };
</script>
<script lang="ts" setup>
  import type { EChartsOption } from 'echarts';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart, LineChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    ToolboxComponent,
  } from 'echarts/components';
  import VueEcharts, { THEME_KEY } from 'vue-echarts';
  import { provide } from 'vue';
  import type { PropType } from 'vue';

  use([
    CanvasRenderer,
    PieChart,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    ToolboxComponent,
  ]);

  defineProps({
    option: { type: Object as PropType<EChartsOption> },
  });

  provide(THEME_KEY, 'light');
</script>

<template>
  <VueEcharts class="pole-chart" v-bind="$attrs" :option="option" />
</template>
